<template>
    <div id="ploatmap">
        <div class="cleardialog m_log">
            <el-dialog v-model="leftlog" title="普查小区图" draggable :show-close="false" :modal="false"
                :close-on-click-modal="false" style="position: fixed;z-index: 9999;width: 25%;left: 20px;">
                <div style="height: 600px;border-radius: 10px;padding: 10px">
                    <div v-show="grade == '1'">
                        <el-button class="m_btn" v-show="!child1show && !child2show && !child3show && !child4show"
                            @click="refresh()" type="success">重新计算数量</el-button>
                        <el-table border v-show="!child1show && !child2show && !child3show && !child4show"
                            :summary-method="getSummaries" show-summary :data="polttable" style="width: 100%"
                            height="550">
                            <el-table-column type="index" align="center" label="序号" width="60" />
                            <el-table-column prop="code" label="代码" width="140" />
                            <el-table-column label="名称">
                                <template #default="scope">
                                    <div :title="scope.row.name"
                                        style="cursor: pointer;text-decoration: underline;width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                                        @click="tochild1(scope.row.code)">{{ scope.row.name }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="数量" />
                            <el-table-column label="定位" align="center" width="60">
                                <template #default="scope">
                                    <el-icon style="cursor: pointer;" @click="flto(scope.row.geom)">
                                        <Location />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button class="m_btn" v-show="child1show && !child2show && !child3show && !child4show"
                            @click="back0()" type="primary">返回上级</el-button>
                        <el-table border v-show="child1show && !child2show && !child3show && !child4show"
                            :data="child1data" :summary-method="getSummaries" show-summary style="width: 100%"
                            height="550">
                            <el-table-column type="index" align="center" label="序号" width="60" />
                            <el-table-column prop="code" label="代码" width="140" />
                            <el-table-column label="名称">
                                <template #default="scope">
                                    <div :title="scope.row.name"
                                        style="cursor: pointer;text-decoration: underline;width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                                        @click="tochild2(scope.row.code)">{{ scope.row.name }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="数量" />
                            <el-table-column label="定位" align="center" width="60">
                                <template #default="scope">
                                    <el-icon style="cursor: pointer;" @click="flto(scope.row.geom)">
                                        <Location />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button class="m_btn" v-show="child2show && !child1show && !child3show && !child4show"
                            @click="back1()" type="primary">返回上级</el-button>
                        <el-table border v-show="child2show && !child1show && !child3show && !child4show"
                            :summary-method="getSummaries" show-summary :data="child2data" style="width: 100%"
                            height="550">
                            <el-table-column type="index" align="center" label="序号" width="60" />
                            <el-table-column prop="code" label="代码" width="130" />
                            <el-table-column label="名称">
                                <template #default="scope">
                                    <div :title="scope.row.name"
                                        style="cursor: pointer;text-decoration: underline;width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                                        @click="tochild3(scope.row.code)">{{ scope.row.name }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="数量" />
                            <el-table-column label="加载">
                                <template #default="scope">
                                    <el-button size="small" @click="load(scope.row)">加载</el-button>
                                    <!-- <el-radio @click="load(scope.row)" v-model="rd" :value="1"></el-radio> -->
                                </template>
                            </el-table-column>
                            <el-table-column label="定位" align="center" width="60">
                                <template #default="scope">
                                    <el-icon style="cursor: pointer;" @click="flto(scope.row.geom)">
                                        <Location />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button class="m_btn" v-show="child3show && !child1show && !child2show && !child4show"
                            @click="back2()" type="primary">返回上级</el-button>
                        <el-table border v-show="child3show && !child1show && !child2show && !child4show"
                            :summary-method="getSummaries" show-summary :data="child3data" style="width: 100%"
                            height="550">
                            <el-table-column type="index" align="center" label="序号" width="60" />
                            <el-table-column prop="code" label="代码" width="130" />
                            <el-table-column label="名称">
                                <template #default="scope">
                                    <div :title="scope.row.name"
                                        style="cursor: pointer;text-decoration: underline;width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                                        @click="tochild4(scope.row.code)">{{ scope.row.name }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="数量" />
                            <el-table-column label="加载">
                                <template #default="scope">
                                    <el-button size="small" @click="load(scope.row)">加载</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="定位" align="center" width="60">
                                <template #default="scope">
                                    <el-icon style="cursor: pointer;" @click="flto(scope.row.geom)">
                                        <Location />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button class="m_btn" v-show="child4show && !child1show && !child2show && !child3show"
                            @click="back3()" type="primary">返回上级</el-button>
                        <el-table border v-show="child4show && !child1show && !child2show && !child3show"
                            :summary-method="getSummaries" show-summary :data="child4data" style="width: 100%"
                            height="550">
                            <el-table-column type="index" align="center" label="序号" width="60" />
                            <el-table-column prop="code" label="代码" width="160" />
                            <el-table-column label="名称" width="80">
                                <template #default="scope">
                                    <div :title="scope.row.name"
                                        style="width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                                        {{ scope.row.name }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="数量" />
                            <el-table-column label="加载">
                                <template #default="scope">
                                    <el-button size="small" @click="load(scope.row, 'jzw')">加载</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="定位" align="center" width="60">
                                <template #default="scope">
                                    <el-icon style="cursor: pointer;" @click="flto(scope.row.geom)">
                                        <Location />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div v-show="grade == '2'">
                        <el-table border v-show="!child1show && !child2show && !child3show && !child4show"
                            :summary-method="getSummaries" show-summary :data="polttable" style="width: 100%"
                            height="550">
                            <el-table-column type="index" align="center" label="序号" width="60" />
                            <el-table-column prop="code" label="代码" width="140" />
                            <el-table-column label="名称">
                                <template #default="scope">
                                    <div :title="scope.row.name"
                                        style="cursor: pointer;text-decoration: underline;width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                                        @click="tochild1(scope.row.code)">{{ scope.row.name }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="数量" />
                            <el-table-column label="定位" align="center" width="60">
                                <template #default="scope">
                                    <el-icon style="cursor: pointer;" @click="flto(scope.row.geom)">
                                        <Location />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button class="m_btn" v-show="child1show && !child2show && !child3show && !child4show"
                            @click="back0()" type="primary">返回上级</el-button>
                        <el-table border v-show="child1show && !child2show && !child3show && !child4show"
                            :summary-method="getSummaries" show-summary :data="child1data" style="width: 100%"
                            height="550">
                            <el-table-column type="index" align="center" label="序号" width="60" />
                            <el-table-column prop="code" label="代码" width="140" />
                            <el-table-column label="名称">
                                <template #default="scope">
                                    <div :title="scope.row.name"
                                        style="cursor: pointer;text-decoration: underline;width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                                        @click="tochild2(scope.row.code)">{{ scope.row.name }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="数量" />
                            <el-table-column label="加载">
                                <template #default="scope">
                                    <el-button size="small" @click="load(scope.row)">加载</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="定位" align="center" width="60">
                                <template #default="scope">
                                    <el-icon style="cursor: pointer;" @click="flto(scope.row.geom)">
                                        <Location />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button class="m_btn" v-show="child2show && !child1show && !child3show && !child4show"
                            @click="back1()" type="primary">返回上级</el-button>
                        <el-table border v-show="child2show && !child1show && !child3show && !child4show"
                            :summary-method="getSummaries" show-summary :data="child2data" style="width: 100%"
                            height="550">
                            <el-table-column type="index" align="center" label="序号" width="60" />
                            <el-table-column prop="code" label="代码" width="140" />
                            <el-table-column label="名称">
                                <template #default="scope">
                                    <div :title="scope.row.name"
                                        style="cursor: pointer;text-decoration: underline;width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                                        @click="tochild3(scope.row.code)">{{ scope.row.name }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="数量" />
                            <el-table-column label="加载">
                                <template #default="scope">
                                    <el-button size="small" @click="load(scope.row)">加载</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="定位" align="center" width="60">
                                <template #default="scope">
                                    <el-icon style="cursor: pointer;" @click="flto(scope.row.geom)">
                                        <Location />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button class="m_btn" v-show="child3show && !child1show && !child2show && !child4show"
                            @click="back2()" type="primary">返回上级</el-button>
                        <el-table border v-show="child3show && !child1show && !child2show && !child4show"
                            :summary-method="getSummaries" show-summary :data="child3data" style="width: 100%"
                            height="550">
                            <el-table-column type="index" align="center" label="序号" width="60" />
                            <el-table-column prop="code" label="代码" width="150" />
                            <el-table-column label="名称">
                                <template #default="scope">
                                    <div :title="scope.row.name"
                                        style="width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                                        {{ scope.row.name }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="数量" />
                            <el-table-column label="加载">
                                <template #default="scope">
                                    <el-button size="small" @click="load(scope.row, 'jzw')">加载</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="定位" align="center" width="60">
                                <template #default="scope">
                                    <el-icon style="cursor: pointer;" @click="flto(scope.row.geom)">
                                        <Location />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div v-show="grade == '3'">
                        <el-table border v-show="!child1show && !child2show && !child3show && !child4show"
                            :summary-method="getSummaries" show-summary :data="polttable" style="width: 100%"
                            height="550">
                            <el-table-column type="index" align="center" label="序号" width="60" />
                            <el-table-column prop="code" label="代码" width="140" />
                            <el-table-column label="名称">
                                <template #default="scope">
                                    <div :title="scope.row.name"
                                        style="cursor: pointer;text-decoration: underline;width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                                        @click="tochild1(scope.row.code)">{{ scope.row.name }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="数量" />
                            <el-table-column label="加载">
                                <template #default="scope">
                                    <el-button size="small" @click="load(scope.row)">加载</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="定位" align="center" width="60">
                                <template #default="scope">
                                    <el-icon style="cursor: pointer;" @click="flto(scope.row.geom)">
                                        <Location />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button class="m_btn" v-show="child1show && !child2show && !child3show && !child4show"
                            @click="back0()" type="primary">返回上级</el-button>
                        <el-table border v-show="child1show && !child2show && !child3show && !child4show"
                            :summary-method="getSummaries" show-summary :data="child1data" style="width: 100%"
                            height="550">
                            <el-table-column type="index" align="center" label="序号" width="60" />
                            <el-table-column prop="code" label="代码" width="140" />
                            <el-table-column label="名称">
                                <template #default="scope">
                                    <div :title="scope.row.name"
                                        style="cursor: pointer;text-decoration: underline;width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                                        @click="tochild2(scope.row.code)">{{ scope.row.name }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="数量" />
                            <el-table-column label="加载">
                                <template #default="scope">
                                    <el-button size="small" @click="load(scope.row)">加载</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="定位" align="center" width="60">
                                <template #default="scope">
                                    <el-icon style="cursor: pointer;" @click="flto(scope.row.geom)">
                                        <Location />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button class="m_btn" v-show="child2show && !child1show && !child3show && !child4show"
                            @click="back1()" type="primary">返回上级</el-button>
                        <el-table border v-show="child2show && !child1show && !child3show && !child4show"
                            :summary-method="getSummaries" show-summary :data="child2data" style="width: 100%"
                            height="550">
                            <el-table-column type="index" align="center" label="序号" width="60" />
                            <el-table-column prop="code" label="代码" width="150" />
                            <el-table-column label="名称">
                                <template #default="scope">
                                    <div :title="scope.row.name"
                                        style="width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                                        {{ scope.row.name }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="数量" />
                            <el-table-column label="加载">
                                <template #default="scope">
                                    <el-button size="small" @click="load(scope.row, 'jzw')">加载</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="定位" align="center" width="60">
                                <template #default="scope">
                                    <el-icon style="cursor: pointer;" @click="flto(scope.row.geom)">
                                        <Location />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>

                    </div>
                </div>
            </el-dialog>
        </div>

        <div class="rigthmap">
            <div style="position: fixed;right: 10px;margin-top:10px;z-index:999;">
                <el-button @click="f_exportmap()">地图导出</el-button>
            </div>
            <div class="map" id="map"></div>
        </div>
        <div class="m_footer">
            <div style="display: flex;justify-content: space-between;align-items: center;height: 38px;font-size: 14px;">
                <div style="display: flex;justify-content: flex-start;">
                    <div style="margin-right: 20px;">区划名称：{{ localname }}</div>
                    <div>区划编码：{{ localcode }}</div>
                </div>
                <div>
                    坐标：
                    {{ Number($store.curlon).toFixed(5) }}，
                    {{ Number($store.curlat).toFixed(5) }}
                    比例尺：
                    <span v-show="Number($store.scale) > 1">
                        1:{{ Number($store.scale).toFixed(0) * 1000 }}
                    </span>
                    <span v-show="Number($store.scale) < 1">
                        1:{{ Number($store.scale * 10).toFixed(0) * 100 }}
                    </span>
                </div>
                <div>建设单位：河南省统计局</div>
            </div>
        </div>
        <!-- <div id="cyl" style="position: absolute;z-index: 9999;color: white;">789</div> -->
        <div id="popup" class="ol-popup">
            <div class="pophead" style="width:100%;height: 20px;">
                <div id="popup-title" style="position: absolute;top: 5px;left: 8px;color: #000000">
                    普查小区信息</div>
                <a href="javascript:void(0)" id="popup-closer" @click="closePopup" class="ol-popup-closer" style="color:#8e908c;"></a>
            </div>
            <div id="popup-content" style="padding: 10px"></div>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { init, unloadMap, measure, formatPoint, aimto, loadPOLYGON, jzwPOLYGON, clearJZW, aimWKT, exportmap, addpop,closePopup } from '../../utils/mapjs/map';
import $mapreq from '../../api/mapreq';
import { useRouter } from 'vue-router';
import { dataStore } from "../../store/data";
const $store = dataStore();
const localname = ref(localStorage.getItem('qhinfo'));
const localcode = ref(localStorage.getItem('code'));
const $router = useRouter();
const polttable = ref([]);
const mcode = ref("");
const child1 = ref("");
const child1show = ref(false);
const child1data = ref([]);
//
const child2 = ref("");
const child2show = ref(false);
const child2data = ref([]);
//
const child3 = ref("");
const child3show = ref(false);
const child3data = ref([]);
//
const child4 = ref("");
const child4show = ref(false);
const child4data = ref([]);
const grade = ref('');
const rd = ref(1);
const leftlog = ref(true);
function f_exportmap() {
    $router.push({
        name: 'expmap'
    })
}
onMounted(() => {
    mcode.value = localStorage.getItem("code");
    grade.value = localStorage.getItem("grade");
    getlist();
    init();
    setTimeout(()=>{
        addpop('普查小区')
    },200)
});
onUnmounted(() => {
    unloadMap();
});
function refresh() {
    ElMessageBox.confirm(
        '确定重新计算?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        getlist();
    })
}
function load(e, f) {
    clearJZW();
    localStorage.setItem("mapmsg", JSON.stringify(e));
    localStorage.setItem("hztype", 'plot');
    localStorage.setItem("xqtype", f);
    if (f == 'jzw') {
        $mapreq.JZWxzcJZWlist(e.code).then(res => {
            if (res.code == 200) {
                jzwPOLYGON(res.data);
            }
        });
    } else {
        $mapreq.getNextLevel(e.code).then(res => {
            if (res.code == 200) {
                jzwPOLYGON(res.data);
            }
        });
    }
    setTimeout(() => {
        // loadPOLYGON(e.name, e.geom);
    }, 500)
    aimWKT(e.geom);
}
function back0() {
    getlist();
    child1show.value = false;
    child2show.value = false;
    child3show.value = false;
    child4show.value = false;
}
function back1() {
    getchild1data();
    child1show.value = true;
    child2show.value = false;
    child3show.value = false;
    child4show.value = false;
}
function back2() {
    getchild2data();
    child1show.value = false;
    child2show.value = true;
    child3show.value = false;
    child4show.value = false;
}
function back3() {
    getchild2data();
    child1show.value = false;
    child2show.value = false;
    child3show.value = true;
    child4show.value = false;
}
function tochild1(e) {
    child1.value = e;
    getchild1data();
    child1show.value = true;
    child2show.value = false;
    child3show.value = false;
    child4show.value = false;
}
function tochild2(e) {
    child2.value = e;
    getchild2data();
    child1show.value = false;
    child2show.value = true;
    child3show.value = false;
    child4show.value = false;
}
function tochild3(e) {
    child3.value = e;
    getchild3data();
    child1show.value = false;
    child2show.value = false;
    child3show.value = true;
    child4show.value = false;
}
function tochild4(e) {
    child4.value = e;
    getchild4data();
    child1show.value = false;
    child2show.value = false;
    child3show.value = false;
    child4show.value = true;
}
function flto(e) {

    aimWKT(e);
}
const getSummaries = (param) => {
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '合计';
            return;
        }
        if (index === 1) {
            sums[index] = '';
            return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => Number.isNaN(value))) {
            sums[index] = `${values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!Number.isNaN(value)) {
                    return prev + curr;
                } else {
                    return prev;
                }
            }, 0)}`;
        } else {
            sums[index] = '';
        }
    });

    return sums;
};
function getlist() {
    $mapreq.othergetplot(mcode.value).then(res => {
        if (res.code == 200) {
            polttable.value = res.data;
        }
    });

}
function getchild1data() {
    $mapreq.othergetplot(child1.value).then(res => {
        if (res.code == 200) {
            child1data.value = res.data;
        }
    });
    $mapreq.getNextLevel(child1.value).then(res => {

    });
}
function getchild2data() {
    $mapreq.othergetplot(child2.value).then(res => {
        if (res.code == 200) {
            child2data.value = res.data;
        }
    });
    $mapreq.getNextLevel(child2.value).then(res => {

    });
}
function getchild3data() {
    $mapreq.othergetplot(child3.value).then(res => {
        if (res.code == 200) {
            child3data.value = res.data;
        }
    });
    $mapreq.getNextLevel(child3.value).then(res => {

    });
}
function getchild4data() {
    $mapreq.othergetplot(child4.value).then(res => {
        if (res.code == 200) {
            child4data.value = res.data;
        }
    });

}
</script>

<style lang="less">
#ploatmap {
    display: flex;
    justify-content: flex-start;
    height: 100%;

    .lfttable {
        padding-left: 20px;
        padding-top: 20px;
        width: 50%;
    }

    .cleardialog>div {
        width: 0;
    }

    .m_log .el-dialog__header {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 20px;
        background-color: #133C7E;
        border-radius: 10px 10px 0 0;

        .el-dialog__title {
            color: #fff;
            font-size: 16px;
        }

        .el-icon svg {
            color: #fff;
        }
    }

    .el-dialog__body {
        padding-top: 0;
        padding-bottom: 0;
        height: calc(100% - 60px);
        // background-color: rgba(3, 36, 56, 0.6);
        overflow-y: auto;
    }

    .el-overlay-dialog {
        pointer-events: none;
    }

    .el-dialog {
        pointer-events: auto;
        padding: 0 !important;
        border-radius: 10px;
    }

    .rigthmap {
        width: 100%;
        position: relative;
        height: 100%;
    }

    .m_btn {
        margin-bottom: 10px;
    }

    #map {
        width: 100%;
        position: absolute;
        height: 100%;
        background-color: rgb(20, 34, 51);

        .ol-overlaycontainer-stopevent {
            display: none;
        }

        .ol-zoom-out {
            display: none;
        }

        .ol-zoom-in {
            display: none;
        }
    }

    .m_footer {
        position: fixed;
        z-index: 99999;
        bottom: 0;
        color: white;
        background-color: rgba(0, 0, 0, .8);
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .ol-popup {
        position: absolute;
        background-color: #fff;
        // background-color: #00669957;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        padding: 10px 0px;
        border-radius: 10px;
        border: 1px solid #1f506f;
        bottom: 15px;
        left: -200px;
        min-width: 280px;
        z-index: 999999;
        display: block;
    }

    .ol-popup:after,
    .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ol-popup:after {
        border-top-color: #eeeeee;
        border-width: 10px;
        left: 134px;
        margin-left: -10px;
    }

    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 134px;
        margin-left: -11px;
    }

    .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
    }

    .ol-popup-closer:after {
        content: "✖";
    }

}
</style>
